<template>
  <div class="wrapper">
    <div class="main">
      <div class="title">
        行业活动
        <el-input style="width: 350px" placeholder="搜索活动" :prefix-icon="Search" />
      </div>
      <div class="blockContainer">
        <div class="blockItem" v-for="item in Imgarr" :key="item.city">
          <img :src="item.path" alt="" />

          {{ item.title }}
          <div class="date">
            {{ item.date }}
            <div style="display: flex; align-items: center">
              <span
                ><img
                  style="height: 18px; width: 20px; position: relative; top: 3px"
                  src="../assets/定位.png"
                  alt=""
              /></span>
              {{ item.city }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import { reactive } from 'vue'
import block1 from '../assets/block1.png'
import block2 from '../assets/block2.png'
import block3 from '../assets/block3.png'
import block4 from '../assets/block4.png'
import block5 from '../assets/block5.png'
import block6 from '../assets/block6.png'
import block7 from '../assets/block7.png'
import block8 from '../assets/block8.png'
const Imgarr = reactive([
  {
    path: block3,
    title: '2024世界机器人大会',
    date: '8日21日-8日24日',
    city: '北京'
  },
  {
    path: block1,
    title: '第八届全球跨境电商峰会',
    date: '7月18日',
    city: '北京'
  },
  {
    path: block8,
    title: '融中2024年夏季峰会',
    date: '7月8日-7月11日',
    city: '北京'
  },
  {
    path: block5,
    title: 'WOT全球技术创新大会2024',
    date: '6月21日-6月22日',
    city: '北京'
  },
  {
    path: block4,
    title: '第二届品创品牌节',
    date: '8月21-8月25日',
    city: '北京'
  },
  {
    path: block2,
    title: 'GTIC 2024中国智能汽车算力峰会',
    date: '7月18日',
    city: '北京'
  },
  {
    path: block7,
    title: '新质生产力AIPartner大会',
    date: '7月18日',
    city: '北京'
  },
  {
    path: block6,
    title: '2024中国生成式AI大会',
    date: '4月18-4月19日',
    city: '北京'
  }
])
</script>
<style lang="less" scoped>
.main {
  width: 80%;
  margin: 0 auto;
}
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #f0f0f1;
  padding-top: 40px;
  .title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
  }
  .blockContainer {
    width: 100%;
    height: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .blockItem {
      width: 22%;
      height: 50%;
      .date {
        display: flex;
        width: 100%;
        justify-content: space-between;
      }
    }
    img {
      width: 100%;
    }
  }
}
</style>
